<template>
    <header>
        <p>确认订单</p>
    </header>
    <p style="text-align: left;padding-left: 1.8vw;font-size: 3.5vw">{{shopName}}</p>
  <!-- 订单明细部分 -->
    <ul class="order-detailed">
        <template v-for="item in shopLineItems">
            <li>
                <div class="order-detailed-left">
                    <img :src="item.itemImg">
                    <p>{{item.itemName}} x {{item.quantity}}</p>
                </div>
                <p>&#165;{{(item.shopShopItemPrice || item.shopItemPrice)*item.quantity}}</p>
            </li>
        </template>
    </ul>
</template>

<script setup>

import {onMounted,reactive} from "vue";
import {userOrderStore} from "../store/unpaidOrder.js";
const emit = defineEmits(["getPrice"])
const orderStore = userOrderStore()
const {shopId,orderId,orderTotal,shopName} = orderStore.orderInfo
const shopLineItems = reactive([])
onMounted(async ()=>{
    shopLineItems.push(...orderStore.getNoneQuantityLineItems())
    emit("getPrice",{
        totalPrice: orderTotal,
        shopId: shopId
    })
})
</script>

<style scoped>
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: relative;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 订单明细部分 ******************/
.order-detailed{
    width: 100%;
}
.order-detailed li{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-detailed li .order-detailed-left{
    display: flex;
    align-items: center;
}
.order-detailed li .order-detailed-left img{
    width: 10vw;
    height: 10vw;
}
.order-detailed li .order-detailed-left p{
    font-size: 3.5vw;
    margin-left: 3vw;
}
.order-detailed li p{
    font-size: 3.5vw;
}
.order-deliveryfee{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
}
</style>